<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {
  max-width: 980px;
  margin: 16px auto;
}

body .markdown-body
{
  padding: 45px;
}

@font-face {
  font-family: fontawesome-mini;
  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
}

.markdown-body {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #333333;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
}

.markdown-body a {
  background: transparent;
}

.markdown-body a:active,
.markdown-body a:hover {
  outline: 0;
}

.markdown-body b,
.markdown-body strong {
  font-weight: bold;
}

.markdown-body mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

.markdown-body sub,
.markdown-body sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.markdown-body sup {
  top: -0.5em;
}
.markdown-body sub {
  bottom: -0.25em;
}

.markdown-body h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.markdown-body img {
  border: 0;
}

.markdown-body hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

.markdown-body pre {
  overflow: auto;
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre,
.markdown-body samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

.markdown-body input {
  color: inherit;
  font: inherit;
  margin: 0;
}

.markdown-body html input[disabled] {
  cursor: default;
}

.markdown-body input {
  line-height: normal;
}

.markdown-body input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

.markdown-body table {
  border-collapse: collapse;
  border-spacing: 0;
}

.markdown-body td,
.markdown-body th {
  padding: 0;
}

.markdown-body .codehilitetable,
.markdown-body .highlighttable {
  border: 0;
  border-spacing: 0;
}

.markdown-body .codehilitetable tr,
.markdown-body .highlighttable {
  border: 0;
}

.markdown-body .codehilitetable pre,
.markdown-body .codehilitetable div.codehilite,
.markdown-body .highlighttable pre,
.markdown-body .highlighttable div.highlight {
  margin: 0;
}

.markdown-body .linenos,
.markdown-body .code,
.markdown-body .codehilitetable td,
.markdown-body .highlighttable td {
  border: 0;
  padding: 0;
}

.markdown-body td:not(.linenos) .linenodiv {
  padding: 0 !important;
}

.markdown-body .code {
  width: 100%;
}

.markdown-body .linenos div pre,
.markdown-body .linenodiv pre,
.markdown-body .linenodiv {
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.markdown-body .code div pre,
.markdown-body .code div {
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.markdown-body * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.markdown-body input {
  font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.4;
}

.markdown-body a {
  color: #4183c4;
  text-decoration: none;
}

.markdown-body a:hover,
.markdown-body a:focus,
.markdown-body a:active {
  text-decoration: underline;
}

.markdown-body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
}

.markdown-body hr:before,
.markdown-body hr:after {
  display: table;
  content: " ";
}

.markdown-body hr:after {
  clear: both;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.1;
}

.markdown-body h1 {
  font-size: 30px;
}

.markdown-body h2 {
  font-size: 21px;
}

.markdown-body h3 {
  font-size: 16px;
}

.markdown-body h4 {
  font-size: 14px;
}

.markdown-body h5 {
  font-size: 12px;
}

.markdown-body h6 {
  font-size: 11px;
}

.markdown-body blockquote {
  margin: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}

.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
  list-style-type: lower-alpha;
}

.markdown-body dd {
  margin-left: 0;
}

.markdown-body code,
.markdown-body pre,
.markdown-body samp {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body kbd {
  background-color: #e7e7e7;
  background-image: -moz-linear-gradient(#fefefe, #e7e7e7);
  background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);
  background-image: linear-gradient(#fefefe, #e7e7e7);
  background-repeat: repeat-x;
  border-radius: 2px;
  border: 1px solid #cfcfcf;
  color: #000;
  padding: 3px 5px;
  line-height: 10px;
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  display: inline-block;
}

.markdown-body>*:first-child {
  margin-top: 0 !important;
}

.markdown-body>*:last-child {
  margin-bottom: 0 !important;
}

.markdown-body .headerlink {
  font: normal 400 16px fontawesome-mini;
  vertical-align: middle;
  margin-left: -16px;
  float: left;
  display: inline-block;
  text-decoration: none;
  opacity: 0;
  color: #333;
}

.markdown-body .headerlink:focus {
  outline: none;
}

.markdown-body h1 .headerlink {
  margin-top: 0.8rem;
}

.markdown-body h2 .headerlink,
.markdown-body h3 .headerlink {
  margin-top: 0.6rem;
}

.markdown-body h4 .headerlink {
  margin-top: 0.2rem;
}

.markdown-body h5 .headerlink,
.markdown-body h6 .headerlink {
  margin-top: 0;
}

.markdown-body .headerlink:hover,
.markdown-body h1:hover .headerlink,
.markdown-body h2:hover .headerlink,
.markdown-body h3:hover .headerlink,
.markdown-body h4:hover .headerlink,
.markdown-body h5:hover .headerlink,
.markdown-body h6:hover .headerlink {
  opacity: 1;
  text-decoration: none;
}

.markdown-body h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid #eee;
}

.markdown-body h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
}

.markdown-body h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

.markdown-body h4 {
  font-size: 1.25em;
}

.markdown-body h5 {
  font-size: 1em;
}

.markdown-body h6 {
  font-size: 1em;
  color: #777;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body .admonition {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body hr {
  height: 4px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li>p {
  margin-top: 16px;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markdown-body blockquote {
  padding: 0 15px;
  color: #777;
  border-left: 4px solid #ddd;
}

.markdown-body blockquote>:first-child {
  margin-top: 0;
}

.markdown-body blockquote>:last-child {
  margin-bottom: 0;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

.markdown-body table th {
  font-weight: bold;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #ddd;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

.markdown-body img {
  max-width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.markdown-body code,
.markdown-body samp {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
}

.markdown-body code:not(.highlight):not(.codehilite), .markdown-body samp {
  background-color: rgba(0,0,0,0.04);
}

.markdown-body code:before,
.markdown-body code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

.markdown-body pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.markdown-body .codehilite,
.markdown-body .highlight {
  margin-bottom: 16px;
}

.markdown-body .codehilite pre,
.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
}

.markdown-body .codehilite,
.markdown-body .highlight,
.markdown-body pre {
  border-radius: 3px;
}

.markdown-body :not(.highlight) > pre {
  background-color: #f7f7f7;
}

.markdown-body .codehilite pre,
.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markdown-body pre {
  word-wrap: normal;
}

.markdown-body pre code {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-body pre code:before,
.markdown-body pre code:after {
  content: normal;
}

/* Admonition */
.markdown-body .admonition {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  position: relative;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  border-left: 6px solid #333;
  padding: 10px 10px 10px 30px;
}

.markdown-body .admonition table {
  color: #333;
}

.markdown-body .admonition p {
  padding: 0;
}

.markdown-body .admonition-title {
  font-weight: bold;
  margin: 0;
}

.markdown-body .admonition>.admonition-title {
  color: #333;
}

.markdown-body .attention>.admonition-title {
  color: #a6d796;
}

.markdown-body .caution>.admonition-title {
  color: #d7a796;
}

.markdown-body .hint>.admonition-title {
  color: #96c6d7;
}

.markdown-body .danger>.admonition-title {
  color: #c25f77;
}

.markdown-body .question>.admonition-title {
  color: #96a6d7;
}

.markdown-body .note>.admonition-title {
  color: #d7c896;
}

.markdown-body .admonition:before,
.markdown-body .attention:before,
.markdown-body .caution:before,
.markdown-body .hint:before,
.markdown-body .danger:before,
.markdown-body .question:before,
.markdown-body .note:before {
  font: normal normal 16px fontawesome-mini;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 1.5;
  color: #333;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 10px;
  padding-left: 10px;
}

.markdown-body .admonition:before {
  content: "\f056\00a0";
  color: 333;
}

.markdown-body .attention:before {
  content: "\f058\00a0";
  color: #a6d796;
}

.markdown-body .caution:before {
  content: "\f06a\00a0";
  color: #d7a796;
}

.markdown-body .hint:before {
  content: "\f05a\00a0";
  color: #96c6d7;
}

.markdown-body .danger:before {
  content: "\f057\00a0";
  color: #c25f77;
}

.markdown-body .question:before {
  content: "\f059\00a0";
  color: #96a6d7;
}

.markdown-body .note:before {
  content: "\f040\00a0";
  color: #d7c896;
}

.markdown-body .admonition::after {
  content: normal;
}

.markdown-body .attention {
  border-left: 6px solid #a6d796;
}

.markdown-body .caution {
  border-left: 6px solid #d7a796;
}

.markdown-body .hint {
  border-left: 6px solid #96c6d7;
}

.markdown-body .danger {
  border-left: 6px solid #c25f77;
}

.markdown-body .question {
  border-left: 6px solid #96a6d7;
}

.markdown-body .note {
  border-left: 6px solid #d7c896;
}

.markdown-body .admonition>*:first-child {
  margin-top: 0 !important;
}

.markdown-body .admonition>*:last-child {
  margin-bottom: 0 !important;
}

/* progress bar*/
.markdown-body .progress {
  display: block;
  width: 300px;
  margin: 10px 0;
  height: 24px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #ededed;
  position: relative;
  box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .1);
}

.markdown-body .progress-label {
  position: absolute;
  text-align: center;
  font-weight: bold;
  width: 100%; margin: 0;
  line-height: 24px;
  color: #333;
  text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe, 0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;
  -webkit-font-smoothing: antialiased !important;
  white-space: nowrap;
  overflow: hidden;
}

.markdown-body .progress-bar {
  height: 24px;
  float: left;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #96c6d7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-size: 30px 30px;
  background-image: -webkit-linear-gradient(
    135deg, rgba(255, 255, 255, .4) 27%,
    transparent 27%,
    transparent 52%, rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, .4) 77%,
    transparent 77%, transparent
  );
  background-image: -moz-linear-gradient(
    135deg,
    rgba(255, 255, 255, .4) 27%, transparent 27%,
    transparent 52%, rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, .4) 77%, transparent 77%,
    transparent
  );
  background-image: -ms-linear-gradient(
    135deg,
    rgba(255, 255, 255, .4) 27%, transparent 27%,
    transparent 52%, rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, .4) 77%, transparent 77%,
    transparent
  );
  background-image: -o-linear-gradient(
    135deg,
    rgba(255, 255, 255, .4) 27%, transparent 27%,
    transparent 52%, rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, .4) 77%, transparent 77%,
    transparent
  );
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, .4) 27%, transparent 27%,
    transparent 52%, rgba(255, 255, 255, .4) 52%,
    rgba(255, 255, 255, .4) 77%, transparent 77%,
    transparent
  );
}

.markdown-body .progress-100plus .progress-bar {
  background-color: #a6d796;
}

.markdown-body .progress-80plus .progress-bar {
  background-color: #c6d796;
}

.markdown-body .progress-60plus .progress-bar {
  background-color: #d7c896;
}

.markdown-body .progress-40plus .progress-bar {
  background-color: #d7a796;
}

.markdown-body .progress-20plus .progress-bar {
  background-color: #d796a6;
}

.markdown-body .progress-0plus .progress-bar {
  background-color: #c25f77;
}

.markdown-body .candystripe-animate .progress-bar{
  -webkit-animation: animate-stripes 3s linear infinite;
  -moz-animation: animate-stripes 3s linear infinite;
  animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

@-moz-keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

.markdown-body .gloss .progress-bar {
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, .7),
    inset 0 -12px 0 rgba(0, 0, 0, .05);
}

/* MultiMarkdown Critic Blocks */
.markdown-body .critic_mark {
  background: #ff0;
}

.markdown-body .critic_delete {
  color: #c82829;
  text-decoration: line-through;
}

.markdown-body .critic_insert {
  color: #718c00 ;
  text-decoration: underline;
}

.markdown-body .critic_comment {
  color: #8e908c;
  font-style: italic;
}

.markdown-body .headeranchor {
  font: normal normal 16px fontawesome-mini;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.headeranchor:before {
  content: '\e157';
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item+.task-list-item {
  margin-top: 3px;
}

.markdown-body .task-list-item input {
  margin: 0 4px 0.25em -20px;
  vertical-align: middle;
}

.markdown-body diagram-div, .markdown-body div.uml-sequence-diagram, .markdown-body, div.uml-flowchart {
  overflow: auto;
}

/* Media */
@media only screen and (min-width: 480px) {
  .markdown-body {
    font-size:14px;
  }
}

@media only screen and (min-width: 768px) {
  .markdown-body {
    font-size:16px;
  }
}

@media print {
  .markdown-body * {
    background: transparent !important;
    color: black !important;
    filter:none !important;
    -ms-filter: none !important;
  }

  .markdown-body {
    font-size:12pt;
    max-width:100%;
    outline:none;
    border: 0;
  }

  .markdown-body a,
  .markdown-body a:visited {
    text-decoration: underline;
  }

  .markdown-body .headeranchor-link {
    display: none;
  }

  .markdown-body a[href]:after {
    content: " (" attr(href) ")";
  }

  .markdown-body abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .markdown-body .ir a:after,
  .markdown-body a[href^="javascript:"]:after,
  .markdown-body a[href^="#"]:after {
    content: "";
  }

  .markdown-body pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .markdown-body pre,
  .markdown-body blockquote {
    border: 1px solid #999;
    padding-right: 1em;
    page-break-inside: avoid;
  }

  .markdown-body .progress,
  .markdown-body .progress-bar {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .markdown-body .progress {
    border: 1px solid #ddd;
  }

  .markdown-body .progress-bar {
    height: 22px;
    border-right: 1px solid #ddd;
  }

  .markdown-body tr,
  .markdown-body img {
    page-break-inside: avoid;
  }

  .markdown-body img {
    max-width: 100% !important;
  }

  .markdown-body p,
  .markdown-body h2,
  .markdown-body h3 {
    orphans: 3;
    widows: 3;
  }

  .markdown-body h2,
  .markdown-body h3 {
    page-break-after: avoid;
  }
}
</style><style>/*GitHub*/
.highlight {background-color:#f7f7f7;color:#333333;}
.highlight .hll {background-color:#ffffcc;}
.highlight .c{color:#999988;font-style:italic}
.highlight .err{color:#a61717;background-color:#e3d2d2}
.highlight .k{font-weight:bold}
.highlight .o{font-weight:bold}
.highlight .cm{color:#999988;font-style:italic}
.highlight .cp{color:#999999;font-weight:bold}
.highlight .c1{color:#999988;font-style:italic}
.highlight .cs{color:#999999;font-weight:bold;font-style:italic}
.highlight .gd{color:#000000;background-color:#ffdddd}
.highlight .ge{font-style:italic}
.highlight .gr{color:#aa0000}
.highlight .gh{color:#999999}
.highlight .gi{color:#000000;background-color:#ddffdd}
.highlight .go{color:#888888}
.highlight .gp{color:#555555}
.highlight .gs{font-weight:bold}
.highlight .gu{color:#800080;font-weight:bold}
.highlight .gt{color:#aa0000}
.highlight .kc{font-weight:bold}
.highlight .kd{font-weight:bold}
.highlight .kn{font-weight:bold}
.highlight .kp{font-weight:bold}
.highlight .kr{font-weight:bold}
.highlight .kt{color:#445588;font-weight:bold}
.highlight .m{color:#009999}
.highlight .s{color:#dd1144}
.highlight .n{color:#333333}
.highlight .na{color:teal}
.highlight .nb{color:#0086b3}
.highlight .nc{color:#445588;font-weight:bold}
.highlight .no{color:teal}
.highlight .ni{color:purple}
.highlight .ne{color:#990000;font-weight:bold}
.highlight .nf{color:#990000;font-weight:bold}
.highlight .nn{color:#555555}
.highlight .nt{color:navy}
.highlight .nv{color:teal}
.highlight .ow{font-weight:bold}
.highlight .w{color:#bbbbbb}
.highlight .mf{color:#009999}
.highlight .mh{color:#009999}
.highlight .mi{color:#009999}
.highlight .mo{color:#009999}
.highlight .sb{color:#dd1144}
.highlight .sc{color:#dd1144}
.highlight .sd{color:#dd1144}
.highlight .s2{color:#dd1144}
.highlight .se{color:#dd1144}
.highlight .sh{color:#dd1144}
.highlight .si{color:#dd1144}
.highlight .sx{color:#dd1144}
.highlight .sr{color:#009926}
.highlight .s1{color:#dd1144}
.highlight .ss{color:#990073}
.highlight .bp{color:#999999}
.highlight .vc{color:teal}
.highlight .vg{color:teal}
.highlight .vi{color:teal}
.highlight .il{color:#009999}
.highlight .gc{color:#999;background-color:#EAF2F5}
</style><title>README</title></head><body><article class="markdown-body"><h2 id="automatic-pjax">Automatic Pjax<a class="headerlink" href="#automatic-pjax" title="Permanent link"></a></h2>
<p>The <code>Pjax.js</code> is <s>a jQuery plugin</s> script that uses ajax, <code>pushState</code> and automatically detects links and forms, for configure page you need use <code>id="pjax-container"</code> in all pages, example:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;pjax-container&quot;</span><span class="p">&gt;</span>
    ...
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>

<p>Pjax load all content from pages, but uses only contents from first element using <code>pjax-container</code>, if you don&rsquo;t need the Pjax in a spefic link or form then use <code>data-pjax-ignore</code> attribute, example:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
    Hello world!
    Example <span class="p">&lt;</span><span class="nt">a</span> <span class="na">data-pjax-ignore</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/page.html&quot;</span><span class="p">&gt;</span>page<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>.
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</pre></div>

<h3 id="setup">Setup<a class="headerlink" href="#setup" title="Permanent link"></a></h3>
<p>Include lib</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;pjax.min.css&quot;</span> <span class="na">data-pjax-resource</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;pjax.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>

<p>Or use CDN:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/pjax.js@0.6/pjax.min.css&quot;</span> <span class="na">data-pjax-resource</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/pjax.js@0.6/pjax.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>

<blockquote>
<p>Note: CSS is optional, you can create your own loader or customize the following structure using CSS (the structure is generated by Pjax.js):
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;pjax-loader pjax-start pjax-inload pjax-end pjax-hide&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;pjax-progress&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div></p>
</blockquote>
<p>Import:</p>
<div class="highlight"><pre><span class="kr">const</span> <span class="nx">Pjax</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;pjax.js&#39;</span><span class="p">);</span>

<span class="p">...</span>
</pre></div>

<p>ESM/ES6 import:</p>
<div class="highlight"><pre><span class="kr">import</span> <span class="nx">Pjax</span> <span class="nx">from</span> <span class="s1">&#39;pjax.js&#39;</span><span class="p">;</span>

<span class="p">...</span>
</pre></div>

<p>RequireJS:</p>
<div class="highlight"><pre><span class="nx">requirejs</span><span class="p">([</span><span class="s1">&#39;folder/foo/bar/pjax&#39;</span><span class="p">],</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">Pjax</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">});</span>
</pre></div>

<h2 id="support">Support<a class="headerlink" href="#support" title="Permanent link"></a></h2>
<p>The <code>pjax.js</code> support links, forms with method <code>GET</code>, forms with method <code>POST</code> and support files and multiple files (<code>&lt;input type="file" multiple&gt;</code>).</p>
<p>Requirements:</p>
<ul>
<li><code>DOMParser</code> or <code>document.implementation</code></li>
<li><code>pushState</code>, <code>replaceState</code> and <code>popstate</code> (DOM History manipulation)</li>
<li><code>FormData</code> (XMLHttpRequest Level 2) - if need upload files using PJAX (<code>enctype="multipart/form-data"</code>)</li>
</ul>
<p>Tested in:</p>
<ul>
<li>Internet Explorer 10</li>
<li>Firefox</li>
<li>Google Chrome</li>
<li>iOS 10</li>
<li>Android 2.3+</li>
</ul>
<h2 id="usage">Usage<a class="headerlink" href="#usage" title="Permanent link"></a></h2>
<p>For use:</p>
<div class="highlight"><pre><span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
</pre></div>

<h2 id="pjax-api">Pjax API<a class="headerlink" href="#pjax-api" title="Permanent link"></a></h2>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Pjax.supported</code></td>
<td>Return <code>true</code> if support this lib, otherwise return <code>false</code></td>
</tr>
<tr>
<td><code>Pjax.remove();</code></td>
<td>Remove PJAX requests and events</td>
</tr>
<tr>
<td><code>Pjax.on(event, function (...) {...});</code></td>
<td>Define an event</td>
</tr>
<tr>
<td><code>Pjax.off(event, function (...) {...});</code></td>
<td>Remove an event</td>
</tr>
<tr>
<td><code>Pjax.request(url[, config])</code></td>
<td>Request using script</td>
</tr>
</tbody>
</table>
<h3 id="pjaxrequest-method"><code>Pjax.request()</code> method<a class="headerlink" href="#pjaxrequest-method" title="Permanent link"></a></h3>
<p><code>config</code> param is optional, you can define like this:</p>
<div class="highlight"><pre>Pjax.request(&quot;/foo/bar&quot;, {
    method: &quot;POST&quot;,
    replace: true,
    data: &quot;foo=1&amp;bar=2&amp;baz=3&quot;
});
</pre></div>

<p>Uploading file:</p>
<div class="highlight"><pre>const formdata = new FormData;
const blob = new Blob([&quot;Hello World!&quot;], {
  type: &quot;text/plain&quot;
});

formdata.append(&quot;file&quot;, blob, &quot;hello.txt&quot;);

Pjax.request(&quot;/foo/bar&quot;, {
    method: &quot;POST&quot;,
    replace: true,
    data: formdata
});
</pre></div>

<p>Details for use <code>data:</code>:</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>replace:</code></td>
<td><code>bool</code></td>
<td><code>false</code></td>
<td>Sets the history state mode, if you set it to <code>false</code> (or omitted) it will use <code>history.pushState()</code>, but if you set it to <code>true</code> it will use <code>history.replaceState()</code>.</td>
</tr>
<tr>
<td><code>method:</code></td>
<td><code>string</code></td>
<td><code>GET</code></td>
<td>Define HTTP method</td>
</tr>
<tr>
<td><code>data:</code></td>
<td><code>bool</code></td>
<td><code>false</code></td>
<td>To send data in the request, you can use <code>String</code> or <code>FormData</code></td>
</tr>
</tbody>
</table>
<h2 id="pjax-events">Pjax Events<a class="headerlink" href="#pjax-events" title="Permanent link"></a></h2>
<table>
<thead>
<tr>
<th>Example</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Pjax.on("initiate", function (url, config) {...});</code></td>
<td>Trigged when clicked in a link or submit a form or execute <code>Pjax.request()</code> method</td>
</tr>
<tr>
<td><code>Pjax.on("done", function (url, status) {...});</code></td>
<td>Trigged when page loaded, <code>status</code> return HTTP code</td>
</tr>
<tr>
<td><code>Pjax.on("fail", function (url, status) {...});</code></td>
<td>Trigged when page failed to load, <code>status</code> return HTTP code</td>
</tr>
<tr>
<td><code>Pjax.on("then", function (url) {...});</code></td>
<td>Executes every time a request is completed, even if it fails or success</td>
</tr>
<tr>
<td><code>Pjax.on("history", function (url, stateData) {...});</code></td>
<td>Executes every use back or forward</td>
</tr>
<tr>
<td><code>Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...});</code></td>
<td>Create your owner response to Pjax.js request</td>
</tr>
<tr>
<td><code>Pjax.on("dom", function (url, newdocument) {...});</code></td>
<td>Allows you to manipulate an element change manually, for example you can create transitions or change newdocument</td>
</tr>
</tbody>
</table>
<blockquote>
<p>Tip: You can use <code>Pjax.on("dom", ...);</code> for remove events in DOM</p>
</blockquote>
<h2 id="pjax-configs">Pjax configs<a class="headerlink" href="#pjax-configs" title="Permanent link"></a></h2>
<table>
<thead>
<tr>
<th>Property</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>containers:</code></td>
<td><code>array</code></td>
<td><code>[ "#pjax-container" ]</code></td>
<td>Informs which elements to update on the page</td>
</tr>
<tr>
<td><code>updatecurrent:</code></td>
<td><code>bool</code></td>
<td><code>false</code></td>
<td>If <code>true</code> request same url in used by current page is executed <code>history.replaceState</code>, otherwise nothing will be executed</td>
</tr>
<tr>
<td><code>updatehead:</code></td>
<td><code>bool</code></td>
<td><code>true</code></td>
<td>The &ldquo;pjax.js&rdquo; has an intelligent update system that helps avoid the &ldquo;blink&rdquo; effect, because instead of updating everything it only updates what has been changed, however if you are sure that nothing will change as you page, you can set it to false, the only one that will continue to be updated will be the <code>&lt;title&gt;</code> tag</td>
</tr>
<tr>
<td><code>insertion:</code></td>
<td><code>string</code></td>
<td><code>undefined</code></td>
<td>Support values <code>append</code> and <code>prepend</code>, if omitted it will replace the content</td>
</tr>
<tr>
<td><code>scrollLeft:</code></td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>After loading a page via PJAX you can define where scrollLeft should scroll. Set <code>-1</code> to disable autoscroll in x-cord</td>
</tr>
<tr>
<td><code>scrollTop:</code></td>
<td><code>number</code></td>
<td><code>0</code></td>
<td>After loading a page via PJAX you can define where scrollTop should scroll. Set <code>-1</code> to disable autoscroll in y-cord</td>
</tr>
<tr>
<td><code>loader:</code></td>
<td><code>bool</code></td>
<td><code>true</code></td>
<td>Adds the native Pjax loader, if you want to create a loader of your own, set it to <code>false</code></td>
</tr>
<tr>
<td><code>nocache:</code></td>
<td><code>bool</code></td>
<td><code>false</code></td>
<td>Prevent cache</td>
</tr>
<tr>
<td><code>proxy:</code></td>
<td><code>string</code></td>
<td><code>""</code></td>
<td>Set Web Proxy</td>
</tr>
<tr>
<td><code>formSelector:</code></td>
<td><code>string</code></td>
<td><code>form:not([data-pjax-ignore]):not([action^='javascript:'])</code></td>
<td>Set form selector, set empty for prevent forms uses Pjax</td>
</tr>
<tr>
<td><code>linkSelector:</code></td>
<td><code>string</code></td>
<td><code>a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:'])</code></td>
<td>Set form selector, set empty for prevent links uses Pjax</td>
</tr>
<tr>
<td><code>headers:</code></td>
<td><code>object</code></td>
<td>Adds custom headers, eg.: <code>{ "foo": "bar", "test": "baz" }</code></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="pjax-with-html5-data-attribute">PJAX with HTML5 data attribute<a class="headerlink" href="#pjax-with-html5-data-attribute" title="Permanent link"></a></h2>
<p>If need overwrite properties for specific link or form you can config using HTML attributes:</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>equivalent</th>
<th>example</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>data-pjax-containers</code></td>
<td><code>containers:</code></td>
<td><code>&lt;a href="..." data-pjax-containers="[ &amp;quot;#foo&amp;quot;, &amp;quot;#bar&amp;quot;, &amp;quot;#baz&amp;quot; ]"</code></td>
<td>Adjusts the containers when the request comes from a specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-updatehead</code></td>
<td><code>updatehead:</code></td>
<td><code>&lt;a href="..." data-pjax-updatehead="false"</code></td>
<td>Allow/Disallow head tag update when the request comes from a specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-insertion</code></td>
<td><code>insertion</code></td>
<td><code>&lt;a href="..." data-pjax-insertion="append"</code></td>
<td>Append or prepend data to the containers instead of updating</td>
</tr>
<tr>
<td><code>data-pjax-scroll-left</code></td>
<td><code>scrollLeft:</code></td>
<td><code>&lt;form action="..." data-pjax-scroll-left="10"</code></td>
<td>custom scroll-left to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-scroll-top</code></td>
<td><code>scrollTop:</code></td>
<td><code>&lt;form action="..." data-pjax-scroll-top="-1"</code></td>
<td>custom scroll-top to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-loader</code></td>
<td><code>loader:</code></td>
<td><code>&lt;a href="..." data-pjax-loader="false"</code></td>
<td>Allow/Disallow loader animate to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-done</code></td>
<td>-</td>
<td><code>&lt;a href="..." data-pjax-done="console.log('success', this);"</code></td>
<td>Custom &ldquo;done&rdquo; event to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-fail</code></td>
<td>-</td>
<td><code>&lt;a href="..." data-pjax-fail="console.log('error', this);"</code></td>
<td>Custom &ldquo;error&rdquo; event to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-ignore</code></td>
<td>-</td>
<td><code>&lt;a href="..." data-pjax-ignore="true"&gt;</code></td>
<td>Normal navigation to specific form or link</td>
</tr>
<tr>
<td><code>data-pjax-resource</code></td>
<td>-</td>
<td><code>&lt;link href="..." data-pjax-resource="true"&gt;</code></td>
<td>Prevent remove element after update DOM (for now it only works in the <code>&lt;head&gt;</code>)</td>
</tr>
</tbody>
</table>
<p>For change configs use like this:</p>
<div class="highlight"><pre><span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">({</span>
    <span class="nx">containers</span><span class="o">:</span> <span class="p">[</span> <span class="s2">&quot;#my-container&quot;</span> <span class="p">],</span> <span class="c1">//Change container element</span>
    <span class="nx">scrollLeft</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="c1">//Disable autoscroll</span>
    <span class="nx">scrollTop</span><span class="o">:</span> <span class="o">-</span><span class="mi">1</span> <span class="c1">//Disable autoscroll</span>
<span class="p">});</span>
</pre></div>

<h2 id="update-two-elements-or-more">Update two elements (or more)<a class="headerlink" href="#update-two-elements-or-more" title="Permanent link"></a></h2>
<p>You can change the element you want to update or even add more elements, eg.:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;navbar&quot;</span><span class="p">&gt;</span>
    ...
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;my-container&quot;</span><span class="p">&gt;</span>
    ...
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">({</span>
    <span class="nx">containers</span><span class="o">:</span> <span class="p">[</span> <span class="s2">&quot;#navbar&quot;</span><span class="p">,</span> <span class="s2">&quot;#my-container&quot;</span> <span class="p">]</span> <span class="c1">//Change containers element</span>
<span class="p">});</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>

<p>You can change configs in <code>initiate</code> event, example:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;pjax-container&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;filter&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">form</span><span class="p">&gt;</span>
            ...
        <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;search-container&quot;</span><span class="p">&gt;</span>
        ...
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>

<span class="nx">Pjax</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;initiate&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">configs</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">url</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;/search/&quot;</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s2">&quot;/search/&quot;</span><span class="p">)</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">configs</span><span class="p">.</span><span class="nx">containers</span> <span class="o">=</span> <span class="p">[</span> <span class="s2">&quot;#search-container&quot;</span> <span class="p">];</span>
    <span class="p">}</span>
<span class="p">});</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>

<p>If you are on a product search page and are doing a new search instead of updating the entire container will only update the element where the products are, other pages will continue to update the entire container.</p>
<h2 id="pjax-in-server-side">Pjax in server-side<a class="headerlink" href="#pjax-in-server-side" title="Permanent link"></a></h2>
<p>It is possible to detect if the request came from the PJAX using the request headers:</p>
<table>
<thead>
<tr>
<th>Header</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>X-PJAX</code></td>
<td>Indicates that the page was requested via PJAX</td>
</tr>
<tr>
<td><code>X-PJAX-Container</code></td>
<td>Informs the container selectors used</td>
</tr>
</tbody>
</table>
<p>Example using PHP:</p>
<div class="highlight"><pre><span class="x">if (isset($_SERVER[&#39;HTTP_X_PJAX&#39;])) {</span>
<span class="x">    echo &#39;You using pjax&#39;;</span>
<span class="x">}</span>
</pre></div>

<h2 id="redirect-using-pjax">Redirect using PJAX<a class="headerlink" href="#redirect-using-pjax" title="Permanent link"></a></h2>
<p>You can use HTTP response header <code>X-PJAX-URL</code> in back-end for force Pjax.js redirects, example:</p>
<div class="highlight"><pre><span class="x">header(&#39;X-PJAX-URL: /new-page.html&#39;);</span>

<span class="x">...</span>
</pre></div>

<h2 id="change-or-add-container-using-pjax">Change or add container using PJAX<a class="headerlink" href="#change-or-add-container-using-pjax" title="Permanent link"></a></h2>
<p>You can use HTTP response header <code>X-PJAX-URL</code> in back-end for force Pjax.js redirects, example:</p>
<div class="highlight"><pre><span class="x">if (isset($_SERVER[&#39;HTTP_X_PJAX&#39;])) {</span>
<span class="x">    header(&#39;X-PJAX-Container: #foo,#bar&#39;);</span>

<span class="x">    echo &#39;&lt;div id=&quot;foo&quot;&gt; ... &lt;/div&gt;&#39;;</span>

<span class="x">    echo &#39;&lt;div id=&quot;bar&quot;&gt; ... &lt;/div&gt;&#39;;</span>
<span class="x">}</span>
</pre></div>

<h2 id="custom-loader-with-pjax">Custom loader with Pjax<a class="headerlink" href="#custom-loader-with-pjax" title="Permanent link"></a></h2>
<p>You can custom CSS, example change color and size, put in new CSS file or <code>&lt;style&gt;</code> tag:</p>
<div class="highlight"><pre><span class="nc">.pjax-loader</span> <span class="nc">.pjax-progress</span> <span class="p">{</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">6px</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<p>If you need custom &ldquo;more&rdquo;, first remove default loader:</p>
<div class="highlight"><pre><span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">({</span>
    <span class="nx">loader</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">});</span>
</pre></div>

<p>And after use <code>initiate</code> and <code>then</code> events:</p>
<div class="highlight"><pre><span class="nx">Pjax</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;initiate&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.my-custom-loader&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;display&quot;</span><span class="p">,</span> <span class="s2">&quot;block&quot;</span><span class="p">);</span>
<span class="p">});</span>

<span class="nx">Pjax</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;then&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;.my-custom-loader&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;display&quot;</span><span class="p">,</span> <span class="s2">&quot;none&quot;</span><span class="p">);</span>
<span class="p">});</span>
</pre></div>

<p>HTML:</p>
<div class="highlight"><pre><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;my-custom-loader&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;loader.gif&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>

<h2 id="pjax-handler-response">Pjax handler response<a class="headerlink" href="#pjax-handler-response" title="Permanent link"></a></h2>
<p>For create a custom responses for Pjax you can use <code>handler</code> event, example:</p>
<div class="highlight"><pre><span class="nx">Pjax</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>

<span class="nx">Pjax</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;handler&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">details</span><span class="p">,</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">fail</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;handler request:&quot;</span><span class="p">,</span> <span class="nx">details</span><span class="p">.</span><span class="nx">method</span><span class="p">,</span> <span class="nx">details</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;handler target:&quot;</span><span class="p">,</span> <span class="nx">details</span><span class="p">.</span><span class="nx">element</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;handler mode history:&quot;</span><span class="p">,</span> <span class="nx">details</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span> <span class="c1">// 1 == push, 2 == replace</span>

    <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="o">&lt;</span><span class="nx">condition</span> <span class="k">for</span> <span class="nx">history</span> <span class="nx">state</span><span class="o">&gt;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">done</span><span class="p">(</span><span class="s1">&#39;&lt;div id=&quot;pjax-container&quot;&gt;Foo: &#39;</span> <span class="o">+</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">()</span> <span class="o">+</span> <span class="s1">&#39;&lt;/div&gt;&#39;</span><span class="p">);</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">fail</span><span class="p">(</span><span class="s2">&quot;Custom Error&quot;</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">});</span>
</pre></div></article></body></html>
